<template>
    <transition name="fade" @after-leave="handleAfterLeave">
        <div :class="['message', type && `message-${type}`]" :style="positionStyle" v-show="visible">
            <slot>
                <p class="message__content">
                    <img src="@/assets/images/message-info.svg" v-if="type == 'info'" />
                    <img src="@/assets/images/message-error.svg" v-if="type == 'error'" />
                    <img src="@/assets/images/message-success.svg" v-if="type == 'success'" />
                    <img src="@/assets/images/message-warning.svg" v-if="type == 'warning'" />
                    <span v-text="message"></span>
                </p>
            </slot>
            <i v-if="showClose" class="iconfont icon-guanbi" @click="close"></i>
        </div>
    </transition>
</template>
<script>
const typeMap = {
    success: "success",
    info: "info",
    warning: "warning",
    error: "error",
};



export default {
    data () {
        return {
            visible: false,
            message: "This template has been modified successfully!",
            type: "info",
            verticalOffset: 20,
            timer: null,
            closed: false,
            duration: 3000,
            showClose: false,
        };
    },
    watch: {
        closed (newVal) {
            if (newVal) {
                this.visible = false;
            }
        },
    },
    computed: {
        typeClass () {
            return this.type
                ? `el-message__icon el-icon-${typeMap[this.type]}`
                : "";
        },
        positionStyle () {
            return {
                top: `${this.verticalOffset}px`,
            };
        },
    },
    methods: {
        handleAfterLeave () {
            this.$destroy(true);
            this.$el.parentNode.removeChild(this.$el);
        },

        close () {
            this.closed = true;
            if (typeof this.onClose === "function") {
                this.onClose(this);
            }
        },

        clearTimer () {
            clearTimeout(this.timer);
        },

        startTimer () {
            if (this.duration > 0) {
                this.timer = setTimeout(() => {
                    if (!this.closed) {
                        this.close();
                    }
                }, this.duration);
            }
        },
    },
    mounted () {
        this.startTimer();
    },
};
</script>
<style lang="scss" scoped>
.message {
    // width: 80%;
    // max-width: calc(100vw - 64px);
    width: 100vw;
    position: fixed;
    display: flex;
    justify-content: center;
    pointer-events: none;
    box-sizing: border-box;
    z-index: 3001;
    padding: 0 32px;

    p {
        display: flex;
        background: #ebfaf4;
        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
        border-radius: 8px;
        border: 1px solid #e3f1eb;
        padding: 12px;
        max-width: 660px;
        color: #008552;
        pointer-events: all;
        span {
            font-size: 14px;
            line-height: 16px;
            font-family: Roboto-Regular, Roboto;
            font-weight: 400;
            white-space: normal;
        }
        img {
            height: 16px;
            width: 16px;
            min-width: 16px;
            margin-right: 4px;
        }
    }

    &.message-success {
    }
    &.message-warning {
        p {
            border-color: #efebe0;
            background: #faf6eb;
            color: #b88800;
        }
    }
    &.message-error {
        p {
            border-color: #f0e2e2;
            background: #f7ebeb;
            color: #c62828;
        }
    }
}
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
}
</style>
